<template>
  <div class="orders-container">
    <!-- 每个订单分为两行展示 -->
    <div class="order" v-for="order in orders" :key="order.order_id">
      <!-- 第一行：订单信息 -->
      <div class="order-header">
        <div class="order-info">
          <span class="date">{{ formatDate(order.created_at) }}</span>
          <span class="order-id">订单号: {{ order.order_number }}</span>
          <span class="seller">卖家: {{ order.seller_nickname }}</span>
        </div>

        <span class="status">订单状态</span>
      </div>

      <!-- 第二行：商品信息、金额与数量、订单状态 -->
      <div class="order-details">
        <!-- 商品信息 -->
        <div class="product-info">
          <!-- 商品图片 -->
          <div class="product-image">
            <img :src="order.first_img_url" alt="商品图片" />
          </div>

          <!-- 商品详细信息 -->
          <div class="product-details">
            <p><strong>{{ order.goods_name }}</strong></p>
            <p>{{ order.goods_desc }}</p>
            <p>{{ order.specification }}</p>
            <p>{{ order.return_policy }}</p>
          </div>
        </div>

        <!-- 金额与数量 -->
        <div class="price-quantity">
          <p>数量: x{{ order.quantity }}</p>
          <p>合计: ￥{{ order.total_price }}</p>
        </div>

        <!-- 订单状态 -->
        <div class="order-status">
          <p>
            <span v-if="order.order_status === 0">
              <router-link :to="`/pay?orderId=${order.order_id}`">去支付</router-link>
            </span>
            <span v-else>{{ getOrderStatusText(order.order_status) }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../api/axios.config";

export default {
  data() {
    return {
      orders: []
    };
  },
  created() {
    this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      try {
        const response = await axios.get("orders/getBybuyerid/789");
        if (response.data.code === 200) {
          this.orders = response.data.data;
        } else {
          this.$message.error("获取订单失败");
        }
      } catch (error) {
        console.error("请求失败", error);
        this.$message.error("网络错误");
      }
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
        date.getDate()
      ).padStart(2, "0")}`;
    },
    getOrderStatusText(status) {
      switch (status) {
        case 0:
          return '去支付'; // 实际由 v-if 控制，这里可以留空或备用
        case 1:
          return '已付款，待发货';
        case 2:
          return '已发货，待收货';
        case 3:
          return '已完成';
        default:
          return '未知状态';
      }
    }
  }
};
</script>

<style scoped>
.orders-container {
  padding: 20px;
  margin: 40px auto;
  /* 上下边距 + 自动左右外边距实现居中 */
  background-color: #f9f9f9;
  border-radius: 8px;
  width: 90%;
  /* 设置宽度为 90% */
  max-width: 1200px;
  /* 可选：限制最大宽度，避免屏幕过大时太宽 */
}

.order {
  margin-bottom: 30px;
  /* 增加每个订单之间的间距 */
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e4e4;
  /* 添加分隔线 */
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
}

.order-info {
  display: flex;
  align-items: center;
}

.order-info span {
  margin-right: 20px;
  /* 调整这里来改变间距 */
}

.order-info .status {
  margin-left: 20px;
  /* 状态和信息之间的间距 */
}

.order-header .status {
  color: #ff5000;
  font-weight: bold;
}

.order-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-info {
  display: flex;
  align-items: flex-start;
}

.product-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
}

.product-details {
  flex: 1;
}

.price-quantity,
.order-status {
  text-align: right;
  width: 200px;
}

.price-quantity p,
.order-status p {
  margin: 5px 0;
}
</style>